<!-- 我正在开发 我是刘瑶瑶 QQ：1778851996 昵称：喑 -->
<template>
	<view :style="{height: height + 'px'}">
		<!-- 搜索框 -->
		<view class="search">
			<!-- 图标 -->
			<text class="icon iconfont icon-dizhi icons fz-44"></text>
			<!-- 输入框 -->
			<input type="text" placeholder="查找消毒位置" />
		</view>
		<!-- 滚动区 -->
		<scroll-view scroll-y="true" :style="{height: height + 'px'}" upper-threshold="500" @scrolltolower="loadmore">
			<!-- 列表项循环 -->
			<block v-for="(item, index) in list" :key="index">
				<!-- 列表项 -->
				<view class="item" @click="goToDetail">
					<!-- 地址和时间 -->
					<view class="item-left">
						<!-- 地址 -->
						<view class="address">{{item.address}}</view>
						<!-- 时间和负责人 -->
						<view class="time-person">
							<!-- 时间 -->
							<view>
								<text class="icon iconfont icon-shijian icons fz-30"></text>
								<text class="time">{{item.time}}</text>
							</view>
							<!-- 负责人 -->
							<view>
								<text class="icon iconfont icon-iconuser icons fz-30"></text>
								<text class="person">{{item.name}}</text>
							</view>
						</view>
					</view>
					<!-- 缩略图 -->
					<view class="item-right">
						<image :src="item.img" mode="aspectFill" class="img"></image>
					</view>
				</view>
			</block>
			<!-- 加载更多 -->
			<template v-if="list.length > 6">
				<view class="load-more">{{loadtext}}</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	const myCloud = uniCloud.init({
		provider: 'aliyun',
		spaceId: '6cf77a04-ca59-47fd-94bc-512c560f6ca6',
		clientSecret: 'cY2Y7rfbJcRdtnYT3+cwpA=='
	});
	export default {
		data() {
			return {
				// 滚动页高度
				height: '',
				// 是否有更多数据
				isMore: true,
				// 当前页
				page: 0,
				// 加载文字
				loadtext: '加载中···',
				// 数据列表
				list: []
			}
		},
		onLoad() {
			uni.getSystemInfo({
			  success: (res) => {
					this.height = res.windowHeight - uni.upx2px(100)
					console.log(this.height)
			  }
			})
			// 首次获取数据
			this.getData()
		},
		methods: {
			// 获取列表数据
			getData() {
				myCloud.callFunction({
					name: 'get_register',
					data: {
						"offset": this.page * 6 + 1
					}
				}).then((res) => {
					// 获取一次，页码增加一次
					this.page++
					// 将新的数据存入数据列表
					this.list = this.list.concat(res.result.data)
					console.log(this.list)
					// 当记录条数小于6时，则为最后一页数据
					if (res.result.data.length < 6) {
						this.loadtext = '所有记录均以显示'
						this.isMore = false
					}
				})
			},
			// 上拉加载更多
			loadmore() {
				// 当还存在数据时，再次加载数据
				if (this.isMore) {
					this.getData()
				}
				// var obj = {
				// 	address: '温州市鹿城区锦绣路128号678弄宏景盛泰花园11组团16幢',
				// 	time: '2020-02-05  09:25',
				// 	name: '吴亦凡',
				// 	img: '/static/logo.png'
				// }
				// setTimeout(() => {
				// 	this.list.push(obj)
				// }, 1000)
			},
			// 跳转详情页
			goToDetail() {
				uni.navigateTo({
					url: ''
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	// 字体大小
	.fz-30 {
		font-size: 30rpx;
	}
	.fz-44 {
		margin: 0 30rpx;
		font-size: 44rpx;
	}
	// 搜索框
	.search {
		display: flex;
		width: 700rpx;
		height: 80rpx;
		box-sizing: border-box;
		margin: 20rpx 25rpx 0;
		padding: 18rpx 0;
		border-radius: 40rpx;
		background-color: #F9F9F9;
	}
	// 每一个列表项
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 140rpx;
		padding: 30rpx 40rpx;
		// 列表项的左边
		.item-left {
			position: relative;
			width: 455rpx;
			height: 140rpx;
			// 列表项的地址
			.address {
				font-size: 30rpx;
				color: #333;
			}
			// 列表项的时间和负责人
			.time-person {
				display: flex;
				justify-content: space-between;
				width: 445rpx;
				position: absolute;
				bottom: 0;
				.time,
				.person {
					font-size: 27rpx;
					color: #ccc;
				}
			}
		}
		// 列表项的右边
		.item-right {
			// 列表项的缩略图
			.img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 25rpx;
			}
		}
	}
	
	.icons {
		margin-right: 10rpx;
		color: #6DDDCB;
	}
	// 加载更多
	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		font-size: 30rpx;
		color: #AAAAAA;
	}
</style>

